<!-- 分享页 -->
<template>
    <iframe
        src="http://192.168.8.131:5173/movies-tribe?id=6461d03878a805000779241d"
        allowTransparency="true"
        scrolling="no"
        id="detail"
        frameborder="0"
        width="100%"
        :height="height"
        onLoad="onLoad()"></iframe>
    <div
        class="flex-center btn"
        v-if="show">
        Watch more in channel
    </div>
</template>

<script setup>
    import { onMounted, onUnmounted, ref } from 'vue';

    const height = ref('');
    const show = ref(false);

    onMounted(() => {
        // message 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
        window.addEventListener('message', sendEvent);
    });

    const sendEvent = (event) => {
        if (event.data?.type === 'CHANGE_HEIGHT') {
            height.value = event.data.height;
        } else if (event?.data?.type === 'SHOW_BTN') {
            show.value = true;
        }
    };

    onUnmounted(() => {
        window.removeEventListener('message', sendEvent);
    });
</script>
<style lang="scss" scoped>
    .btn {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 32px;
        z-index: 99;
        width: 670px;
        height: 104px;
        font-weight: 600;
        font-size: 26px;
        text-align: center;
        color: rgba(0, 0, 0, 0.9);
        background: #ffffff;
        border-radius: 100px;
    }
</style>
